<GridLayout rows="auto, auto, *, auto" class="tab-content">

  <Label row="0" text="Pick the image processing source:" textWrap="true"></Label>

  <FlexboxLayout row="1" flexDirection="row" justifyContent="space-around">
    <Button text="Puppy" textWrap="true" (tap)="fromAppFolder()" class="button"></Button>
    <Button text="Cam roll" textWrap="true" (tap)="fromCameraRoll()" class="button"></Button>
    <!-- the image may require rotation on Android, and permission may be required - not feeling like exposing this for now -->
    <iOS>
      <Button text="Cam pic" textWrap="true" (tap)="fromCameraPicture()" class="button"></Button>
    </iOS>
    <Button text="Cam feed" textWrap="true" (tap)="fromCameraFeed()" class="button"></Button>
  </FlexboxLayout>

  <Image row="2" [src]="pickedImage" width="240" horizontalAlignment="center" (tap)="reusePickedImage()"></Image>

  <Label row="3" [text]="pickedImage ? '⬆️ Tap the image to use it again' : ''" textWrap="true" horizontalAlignment="center" class="m-b-20" width="100%"></Label>

</GridLayout>
